不論你使用的作業系統是 Window 系統或者 macOS，都有可以幫你很快速建立 WordPress 開發環境的軟體及工具，以挑選自己感覺最順手的為主。

• XAMPP
• Vagrant
• DDEV

本篇文章主要介紹使用 XAMPP 及 Vagrant 來架設本地端的開發環境，另外有很棒的工具，名為 DDEV，新世代的工具，不可不提！

XAMPP

圖：XAMPP 官方網站首頁

XAMPP 是一種架站包，它把 PHP、Apache、MySQL 都包裝起來，讓開發者不用額外多花心思在安裝相關套件和服務。類似的架站包還有 WAMP、MAMP、AppServ 等等，不過除了 XAMPP 有繼續跟隨著 PHP 的版號持續更新，其它的架站包都支援至 PHP 7.4 就停止更新了，因此唯一可以考慮的只有 XAMPP。

即使 XAMPP 已經幫我們安裝好 WordPress 網站所需要的背景技術，但設定網站的步驟還是少不了。

1. 下載和安裝XAMPP

前往 XAMPP 官方網站下載對應你所使用的作業系統的 XAMPP 安裝包，接著安裝 XAMPP 到你的電腦。

2. 啟動 Apache 和 MySQL

圖：XAMPP 控制面板

打開 XAMPP 控制面板並啟動 Apache 和 MySQL。

3. 建立 MySQL 資料庫

為學習開發 WordPress 所需要的本地網站建立一個資料庫，安裝 WordPress 時，會把相關的資料表安裝到該資料庫。

在你的網路瀏覽器中，輸入：

http://localhost/phpmyadmin/

圖：資料庫管理工具 - phpMyAdmin 畫面

即可看到資料庫管理工具 phpMyAdmin 的畫面。點擊「資料庫」，然後建立一個新的資料庫，例如命名為 wp_db。

4. 下載 WordPress

前往 WordPress 官方網站下載最新版本的 WordPress。解壓縮剛剛下載的 zip 檔，並把這個目錄改名為 wordpress 並搬到 XAMPP 的 htdocs 目錄中。

此時目錄結構應該是這樣：

C:\xampp\htdocs\wordpress

5. 虛擬域名

除了直接用本地端的 IP 連到 WordPress，我們也可以設定一個只有在自己的電腦上才能使用的虛擬域名，例如 wordpress.dev、wp.local 等等。

在系統中有一個名為 hosts 的檔案，可以直接設定域名並對應 IP，就不需要透過 DNS 伺服器，就可以解析出 IP 位址。在這次的範例，我們使用本地 IP 位址 127.0.0.10 和虛擬域名 wp.local 作為示範。

6. 編輯 hosts 檔案

用管理員權限開啟記事本或 Notepad++ 或其它文字編輯器。

圖：用管理員權限打開記事本

接著到以下目錄。

C:\Windows\System32\drivers\etc

找到並打開 hosts 檔案，加以下內容：

127.0.0.10  wp.local

存檔。

7. 設定 Apache 虛擬主機

打開 XAMPP 控制面板並停止 Apache 服務。接著修改以下檔案：

c:\xampp\apache\conf\extra\httpd-vhosts.conf

在檔案的下方加入虛擬主機的設定區塊。

<VirtualHost 127.0.0.10:80>
    ServerAdmin webmaster@wp.local
    DocumentRoot "C:/xampp/htdocs/wordpress"
    ServerName wp.local
    ErrorLog "logs/wp.local-error.log"
    CustomLog "logs/wp.local-access.log" common
</VirtualHost>

儲存檔案後，在 XAMPP 控制面版上重新啟動 Apache 服務。
接著試著打開瀏覽器，輸入：

http://wp.local

或者：

http://127.0.0.10

就可以看到 WordPress 的安裝畫面了。

8. 安裝 WordPress

依照指示安裝 WordPress，填入在步驟 3 設定的資料庫名稱 wp_db，資料庫的使用者帳號預設是 root，將密碼欄位為空，資料庫的主機欄位填入 localhost 就可以了。

Vagrant

圖：Vagrant 官方網頁首頁

Vagrant 是一套使用 Ruby 程式語言編寫的虛擬機管理工具，支援的虛擬機有 VirturalBox 和 VMware。Vagrant 透過一個名為 Vagrantfile 的設定檔，將需要的虛擬機環境、Linux 的發行版、共享目錄等設定寫在這個檔案，透過簡單的指令就可以啟動一個虛擬機，且開發團隊可以用享這個檔案，使團隊成員都使用同樣的開發環境進行開發。

1. 安裝軟體

VirtualBox 提供虛擬機的環境，Vagrant 只是命令列的工具，用來調整虛擬機的環境配置。

2. 建立共享目錄

.
├── wordpress
└── Vagrantfile

先建立一個目錄，用來和虛擬機共享目錄，以便於我們編輯程式碼，虛擬機內同樣能讀取該程式碼，立即生效。在這個例子中，共享目錄名稱為 wordpress。

3. 編寫 Vagrantfile

圖：Vagrantfile 程式碼 (Gist)

每一份 Vagrantfile 都必須指定一個 Vagrant box，是一種預先配置虛擬機環境的映像檔。例如第 6 行：使用 Ubuntu 官方的映像檔，版本為 22.04 LTS。會從 Vagrant 的雲端儲存庫下載 Ubuntu 22.04 並載入進虛擬機中。

第 3 行，這台虛擬機使用私有網路的方式連接，這個例子指定了 192.168.33.10。

第 4 行：虛擬機與宿主主機 (host) 共享的目錄，稍後 WordPress 程式會下載到這裡。指定了 /var/www/html 是 Apache 的預設目錄，這樣不用額外設定就可以直接看到 WordPress

第 10 至第 27 行，指定了虛擬機初始化後要做的事，這邊做了許多事，幫我們把 Apache 伺服器、PHP 以及 MySQL 都裝起來，並安裝了 WordPress 到共享目錄中。

4. 使用 Vagrant 指令啟動虛擬機

輸入以下指令，即可啟用虛擬機。

vagant up

沒意外的話，輸入 http://192.168.33.10 就會跳轉至 /wp-admin/setup-config.php 開始進行 WordPress 的初始化安裝畫面：

圖：WordPress 安裝畫面

5. 安裝 WordPress

依照指示安裝 WordPress，填入在 Vagrantfile 設定的資料庫名稱 wordpress_db，資料庫的使用者帳號是 wordpressuser，密碼欄位為 password，資料庫的主機欄位填入 localhost 就可以了。

常用 Vagrant 指令

登入虛擬機

vagrant ssh

關閉虛擬機

vagrant halt

移除虛擬機

vagrant destroy

使用 Vagrant 搭配虛擬機作為開發環境有個好處，登入主機內的操作和使用 VPS、GCP CE、AWS EC2 等雲端主機無異，適合用來練習 Linux 的操作，就算亂裝東西玩壞了也沒關係，重啟一個新的 VM 就好。有心學習 Linux 主機管理的開發者可以藉由操作虛擬機，達到練習的效果。

注意：Vagrant 和 VirtualBox 每次升版都是一種挑戰（甚至本篇文章的設定，在不同的電腦可能需要調整 Vagrantfile 才能順利啟動），依筆者使用多年的經驗，常會有奇怪的問題導至無法順利啟用、主機登不進去、共享目錄功能失效等等，確定當前版本可以運作後就盡量不要升版。

DDEV

除了使用 XAMPP 及 Vagrant 搭配虛擬機的方式外，還有沒有更方便、更好用的選擇。當然有！

DDEV 是一個開放原始碼的工具，使用 Docker 作為背後的技術支持，開發者藉由使用 DDEV，在容器化的環境中快速設定並管理 PHP 開發專案，內建 WordPress 的 CLI 工具，對於 WordPress 開發者來說十分友善！

總結

建立 WordPress 環境的方式很多元，不限於本篇文章所提到的工具，使用 Mac 的開發者也可以透過 brew 套件管理工具直接安裝 PHP、MySQL 及 Apache 或 Ningx。

Windows 使用者也可以使用 WSL 子系統，透過 Ubuntu 的 apt 套件管理工具自行安裝剛剛所提到套件及服務。

對於初學者來說，挑選一個相對簡單的安裝方式，降低進入的門檻，是筆者寫作的主要方向，因此本篇著墨於 XAMPP 及 Vagrant 這兩種分式，另外 DDEV 真的是很棒的工具，行有餘力的話，一定要試試。

課後思考：

本篇提到的虛擬域名，可否用來設定自己註冊的真實域名在本機上進行測試？

前篇解答參考：

你可以舉例全世界有多少比例的網站使用 WordPress，例如，美國白宮網站也是使用 WordPress。WordPress 雖然免費，但接案者的價值在於幫客戶節省成本，並依其專業幫客戶客製化，滿足其需求的缺口。條列出全站客製及使用 WordPress 加上部分客製的工時及成本比較表，有助於說服客戶採用 WordPress 作為網站的基礎架構。